<template>
	<view>
		<view class="index-list animated fadeInLeft" @tap.stop='toDetail(index)'>
			<view class='index-list1'>
				<view class="left" @tap.stop="touserdetail">
					<image :src="item.userpic" mode="widthFix"></image>
					<text class="username">{{item.username}}</text>
				</view>
				<view class="right" >
					<view class="guanzhu" v-show="!isShow"   @tap.stop="guanzhu">
						<text class="icon iconfont icon-xihuan1"></text>关注
					</view>
					<view class="guanzhu" v-show="isShow"  @tap.stop="guanzhu">
						<text class="icon iconfont icon-xihuan"></text>取消关注
					</view>
					<text class="icon iconfont icon-guanbi" @tap.stop="del"></text>
				</view>
			</view>
			<view class='index-list2'>
				{{item.title}}
			</view>
			<view class='index-list3'>
				<image src="../../static/demo/datapic/11.jpg" mode="widthFix"></image>
				<block v-if="item.type==='video'">
					<view class="playButton icon iconfont icon-bofang"></view>
					<view class="playCount">
						<text class="count">22w次播放</text>
						<text time>10:00</text>
					</view>
				</block>
			</view>
			<view class='index-list4'>
				<view class="left">
					<view class="icon iconfont icon-icon_xiaolian-mian" :class="{active:infonum.index == 1}" @tap.stop="dianzan('ding')">
						<text>{{infonum.dingnum}}</text>
					</view>
					<view class="icon iconfont icon-kulian " :class="{active:infonum.index == 2}" @tap.stop="dianzan('cai')">
						<text>{{infonum.cainum}}</text>
					</view>
				</view>
				
				<view class="right">
					<view class="icon iconfont icon-xiaoxi">
						<text>{{item.commentnum}}</text>
					</view>
					<view class="icon iconfont icon-zhuanfa">
						<text>{{item.sharenum}}</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				isShow:false,
				infonum:{}
			}
		},
		props:{
			item:Object,
			index:Number
		},
		created(){
			this.infonum = this.item.infonum
			this.isShow = this.item.isguanzhu
		},
		
		methods:{
			del(){
				this.$emit('delItem')
			},
			// 跳转到用户详情
			touserdetail(){
				console.log('跳转到用户详情')
			},
			guanzhu(){
				this.item.isguanzhu = !this.item.isguanzhu
				this.isShow = this.item.isguanzhu
				if(this.isShow  == true){
					uni.showToast({
						title:"关注成功"
					})
				}else {
					uni.showToast({
						title:"取消关注"
					})
				}
			},
			
			dianzan(type){
				// infonum: {
				// 	index: 2, //0:没有关注  1：赞  2：踩
				// 	dingnum: 11,
				// 	cainum: 2
				// }
				switch(type){
					case 'ding':
					if(this.infonum.index === 1){ this.infonum.index=0;this.infonum.dingnum--; return ;}
					this.infonum.dingnum++
					if(this.infonum.index == 2){
						this.infonum.cainum --;
					}
						this.infonum.index = 1
						break;
					case 'cai':
					if(this.infonum.index === 2){this.infonum.index=0;this.infonum.cainum--; return;}
					this.infonum.cainum ++ ;
					if(this.infonum.index == 1){
						this.infonum.dingnum--;
					}
						this.infonum.index = 2
						break;
				}
			},
			toDetail(index){
				console.log('跳转到详情页')
				console.log(index)
				uni.navigateTo({
					url:'../../pages/detail/detail?detailData='+JSON.stringify(this.item)
				})
			}
		},
		
		
	}
</script>

<style scoped>
	view{
		/* line-height: 1; */
	}
	.index-list {
		padding: 20upx;
		border-bottom: 1upx solid #eeeeee;
	}
	.index-list1,.index-list2,.index-list3,.index-list4{
		margin-bottom: 20upx;
	}
	.index-list1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		vertical-align: middle;
	}
	.index-list1 .left{
		display: flex;
		align-items: center;
		color:#999;
	}
	.index-list1 .left text {
		font-size: 35upx;
	}
	.index-list1 .left image{
		width:100upx;
		border-radius: 50%;
		margin-right: 20upx;
	}
	.index-list1 .right {
		display: flex;
		align-items: center;
	}
	.guanzhu {
		padding: 5upx 10upx;
		margin : 10upx;
		background-color: rgba(233,233,233,0.5);
	}
	
	.index-list2{
		font-size: 35rpx;
		font-weight: 700;
	}
	.index-list3{
		position: relative;
	}
	
	.index-list3 image {
		width:100%;
		border-radius: 20upx;
	}
	.index-list3 .playButton{
		position:absolute;
		left:50%;
		top:50%;
		transform: translate(-50% ,-50%);
		font-size: 150upx;
		color:rgba(255,255,255,0.8);
	}
	.playCount {
		position: absolute;
		right:20upx;
		bottom: 30upx;
		background-color: rgba(30,30,30,.7);
		padding: 10upx 20upx;
		color:#fff;
		border-radius: 30upx;
		font-size:20upx;
	}
	.playCount .count{
		margin-right: 10upx;
	}
	.index-list4 {
		display: flex;
		justify-content: space-between;
	}
	.index-list4 view {
		font-size: 35upx;
		display: flex;
		margin-right: 10upx;
		color:rgba(150,150,150,0.5);
	}
	.index-list4 view text {
		margin-left:10upx;
	}
	.index-list4 .left  view.active{
		color:#FEE42B;
	}
	.index-list4 .left  view text {
		color:#ccc;
	}
</style>
